<html>
<head>
<title>League of Legends Creep Timer (Summoner's Rift)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<script src="soundmanager2-nodebug-jsmin.js"></script>
</head>
<style type="text/css">
#outerwrapper
{
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
}

#innerwrapper
{
	align:center;
	position: absolute;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
}

.big
{
	font-weight: bold;
}

.medium
{
	font-weight: bold;
}

.small
{
	font-weight: normal;
}

body
{
	padding: 4px;
	margin: 4px;
	margin-top: 6px;
}

.counter
{
	position: absolute;
	height: 29%;
	width: 49%;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.reset
{
	position: absolute;
	height: 10%;
	width: 100%;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	cursor: pointer;
	cursor: hand;
	background-color: #E38809;
}

.timer
{ 
	position : absolute;
	top: 0;
	height: 63%; 
	width: 100%; 
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.text
{
	position: absolute;
	font-family: arial; 
	color: white; 
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	cursor: pointer;
	cursor: hand;
	text-align: center;
	width: 100%;
}

.header
{
	position: absolute;
	top: 5%;
	width: 100%;
}
	

.adjust
{
	bottom: 0;
	position: absolute;
	height: 35%; 
	width: 49%; 
	line-height: 100%;
	line-width: 100%;
	font-size: 12pt; 
	font-weight: bold;
	background-color: #27AEF2;
}

.left
{
	left: 0;
}

.right
{
	right: 0;
}

div#wrapper
{
	position: absolute;
	left: 5px;
	top: 5px;
}

div#baron
{
	left: 0;
	top: 0;
}	

div#dragon
{
	left: 51%;
	top: 0;
}

div#blueGolem
{
	left: 0;
	top: 30%;
}

div#purpleGolem
{
	left: 51%;
	top: 30%;
}

div#blueLizard
{
	left: 0;
	top: 60%;
}

div#purpleLizard
{
	left: 51%;
	top: 60%;
}

div#reset
{
	left: 0;
	top: 90%;
}

</style>


<script type="text/javascript">
soundManager.url = '/';
soundManager.flashVersion = 8;
soundManager.useFlashBlock = false;

soundURL = 'http://creeptimer.pleasedontbanme.com/';

soundManager.onready(function() {
	var paramAudio = getParam('audio');
	var paramVolume = getParam('volume');
	var paramWarnTime = getParam('warntime');
	if (paramWarnTime != "") warnTime = parseInt(paramWarnTime);
	if (paramVolume != "") soundVolume = parseInt(paramVolume);
	if (paramAudio == "no") playAudio = 0;
	
	if (playAudio == 0)
	{
		warnTime = -1;
	}
	else
	{
		soundManager.createSound({
			id: 'baron',
			url: soundURL + 'baron.ogg',
			autoLoad: true,
			autoPlay: false,
			multiShot: false,
			volume: soundVolume
		});

		soundManager.createSound({
			id: 'dragon',
			url: soundURL + 'dragon.ogg',
			autoLoad: true,
			autoPlay: false,
			multiShot: false,
			volume: soundVolume
		});

		soundManager.createSound({
			id: 'blueGolem',
			url: soundURL + 'blueGolem.ogg',
			autoLoad: true,
			autoPlay: false,
			multiShot: false,
			volume: soundVolume
		});

		soundManager.createSound({
			id: 'blueLizard',
			url: soundURL + 'blueLizard.ogg',
			autoLoad: true,
			autoPlay: false,
			multiShot: false,
			volume: soundVolume
		});

		soundManager.createSound({
			id: 'purpleGolem',
			url: soundURL + 'purpleGolem.ogg',
			autoLoad: true,
			autoPlay: false,
			multiShot: false,
			volume: soundVolume
		});

		soundManager.createSound({
			id: 'purpleLizard',
			url: soundURL + 'purpleLizard.ogg',
			autoLoad: true,
			autoPlay: false,
			multiShot: false,
			volume: soundVolume
		});

		soundManager.createSound({
			id: 'respawned',
			url: soundURL + 'respawned.ogg',
			autoLoad: true,
			autoPlay: false,
			multiShot: false,
			volume: soundVolume
		});

		if (warnTime > 0)
		{
			soundManager.createSound({
				id: 'respawningSoon',
				url: soundURL + 'respawningSoon.ogg',
				autoLoad: true,
				autoPlay: false,
				multiShot: false,
				volume: soundVolume
			});
		}
	}
});

var BARON_MAX = 900;
var DRAGON_MAX = 360;
var BUFF_MAX = 300;

var BARON_RESET = 420;
var DRAGON_RESET = 360;
var BUFF_RESET = 300;

var BARON_START = 900;
var DRAGON_START = 150;
var BUFF_START = 115;

var DEFAULT_BUTTON_INCREMENT = 15;
var WHEEL_INCREMENT = 10;

var DEFAULT_HEIGHT = 600;
var DEFAULT_WIDTH = 400;
var DEFAULT_BIG = 60;
var DEFAULT_MEDIUM = 30;
var DEFAULT_SMALL = 14;

var width = DEFAULT_WIDTH;
var height = DEFAULT_HEIGHT;
var bigFont = DEFAULT_BIG;
var mediumFont = DEFAULT_MEDIUM;
var smallFont = DEFAULT_SMALL;

var playAudio = 1;
var warnTime = 30;
var soundVolume = 100;

var buttonIncrement = DEFAULT_BUTTON_INCREMENT;

var counters;
var selected = -1;
var keyHeld = 0;

function getParam(name)
{
	name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regexS = "[\\?&]" + name.toLowerCase() + "=([^&#]*)";
	var regex = new RegExp(regexS);
	var results = regex.exec(window.location.href.toLowerCase());
	if (results == null)
		return "";
	else
		return results[1];
}

function setWidthAndHeight()
{
	document.getElementById("innerwrapper").style.width = width;
	document.getElementById("innerwrapper").style.height = height;
	document.getElementById("bottomPad").style.top = height;
}

function setFont(element, size)
{
	element.style.fontSize = size + "px";
}

function formatTime(time)
{
	if (time == 0)
		return "UP";
	var minutes = Math.floor(time / 60);
	var seconds = time % 60;
	if (seconds < 10)
		return minutes + ":0" + seconds;
	return minutes + ":" + seconds;
}

function getFill(time)
{
	if (time > 0)
		return "#E64622";
	return "#43BD06";
}

function verticalCenter(element)
{
	element.style.paddingTop = 0;
	var elementHeight = element.offsetHeight;
	var parentHeight = element.parentNode.offsetHeight;
	element.style.paddingTop = (parentHeight / 2.0) - (elementHeight / 2.0);
}

function counterMouseWheel(event, id)
{
	event = event ? event : window.event;
	var wheelData = event.detail ? event.detail * -1 : event.wheelDelta / 40;
	adjustCounter(id, (wheelData > 0) ? WHEEL_INCREMENT : -WHEEL_INCREMENT);
	return cancelEvent(event);
}

function baron_MouseWheel(event) { counterMouseWheel(event, 0); }
function dragon_MouseWheel(event) { counterMouseWheel(event, 1); }
function blueGolem_MouseWheel(event) { counterMouseWheel(event, 2); }
function purpleGolem_MouseWheel(event) { counterMouseWheel(event, 3); }
function blueLizard_MouseWheel(event) { counterMouseWheel(event, 4); }
function purpleLizard_MouseWheel(event) { counterMouseWheel(event, 5); }

function Counter(maxTime, resetTime, id)
{
	this.time = 0;
	this.id = id;
	this.maxTime = maxTime;
	this.resetTime = resetTime;
	this.txt = document.getElementById(id + "Txt");
	this.fill = document.getElementById(id + "Fill");
	this.plusTxt = document.getElementById(id + "PlusTxt");
	this.minusTxt = document.getElementById(id + "MinusTxt");
	this.headerTxt = document.getElementById(id + "HeaderTxt");

	this.txt.style.fontSize = bigFont;
	this.plusTxt.style.fontSize = mediumFont;
	this.minusTxt.style.fontSize = mediumFont;
	this.headerTxt.style.fontSize = smallFont;

	this.minusTxt.innerHTML = "- :" + buttonIncrement;
	this.plusTxt.innerHTML = "+ :" + buttonIncrement;

	verticalCenter(this.txt);
	verticalCenter(this.plusTxt);
	verticalCenter(this.minusTxt);
	verticalCenter(this.headerTxt);

	this.adjust = adjust;
	this.reset = reset;
	this.set = set;
	this.update = update;
	this.update();
}

function update()
{
	if (this.time < 0) this.time = 0;
	if (this.time > this.maxTime) this.time = this.maxTime;

	this.txt.innerHTML = formatTime(this.time);
	this.fill.style.backgroundColor = getFill(this.time);
}

function adjust(delta, notify)
{
	var originalTime = this.time;
	this.time += delta;
	this.update();
	if (originalTime != 0 && this.time == 0 && notify == 1 && playAudio == 1)
		soundManager.play(this.id, {
				onfinish: function() 
				{
					soundManager.play('respawned');
				}
			});
	if (this.time == warnTime && notify == 1 && playAudio == 1)
		soundManager.play(this.id, {
				onfinish: function() 
				{
					soundManager.play('respawningSoon');
				}
			});
}	

function set(time)
{
	this.time = time;
	this.update();
}

function reset()
{
	if (this.time == 0)
		this.set(this.resetTime);
	else
		this.set(0);
}

function init()
{
	var paramWidth = getParam("width");
	var paramHeight = getParam("height");
	var paramBigFont = getParam("big");
	var paramMediumFont = getParam("medium");
	var paramSmallFont = getParam("small");
	var paramIncrement = getParam("buttonincr");

	if (paramWidth != "") width = paramWidth;
	if (paramHeight != "") height = paramHeight;
	if (paramBigFont != "") bigFont = paramBigFont;
	if (paramMediumFont != "") mediumFont = paramMediumFont;
	if (paramSmallFont != "") smallFont = paramSmallFont;
	if (paramIncrement != "") buttonIncrement = parseInt(paramIncrement);


	setWidthAndHeight();

	counters = new Array(6);
	counters[0] = new Counter(BARON_MAX, BARON_RESET, "baron");
	counters[1] = new Counter(DRAGON_MAX, DRAGON_RESET, "dragon");
	counters[2] = new Counter(BUFF_MAX, BUFF_RESET, "blueGolem");
	counters[3] = new Counter(BUFF_MAX, BUFF_RESET, "purpleGolem");
	counters[4] = new Counter(BUFF_MAX, BUFF_RESET, "blueLizard");
	counters[5] = new Counter(BUFF_MAX, BUFF_RESET, "purpleLizard");

	var resetTxt = document.getElementById("resetTxt");
	setFont(resetTxt, mediumFont);
	verticalCenter(resetTxt);

	hookEvent("baron", "mousewheel", baron_MouseWheel);
	hookEvent("dragon", "mousewheel", dragon_MouseWheel);
	hookEvent("blueGolem", "mousewheel", blueGolem_MouseWheel);
	hookEvent("purpleGolem", "mousewheel", purpleGolem_MouseWheel);
	hookEvent("blueLizard", "mousewheel", blueLizard_MouseWheel);
	hookEvent("purpleLizard", "mousewheel", purpleLizard_MouseWheel);

	document.onkeydown = keyDown;
	document.onkeyup = keyUp;
	tick();
}

function tick() 
{
	for (i=0; i<6; i++)
		counters[i].adjust(-1, 1);	
	setTimeout("tick()", 1000);
}

function resetCounter(id)
{
	counters[id].reset();
}

function adjustCounter(id, delta, notify)
{
	counters[id].adjust(delta, notify);
}

function gameStart()
{
	counters[0].set(BARON_START);
	counters[1].set(DRAGON_START);
	for (i=2; i<6; i++)
		counters[i].set(BUFF_START);
}

function keySelect(id)
{
	keyHeld = 0;
	if (selected == -1 || id == -1)
		selected = id;
}

function keyReset(id)
{
	if (keyHeld == 0)
		resetCounter(id);
	keyHeld = 0;
}

function adjustSelected(delta)
{
	if (selected != -1)
	{
		keyHeld = 1;
		adjustCounter(selected, delta, 0);
	}
}

function keyDown(event)
{
	var keyCode = ('which' in event) ? event.which : event.keyCode;
	switch (keyCode)
	{
		case 81: keySelect(0); break;
		case 87: keySelect(1); break;
		case 65: keySelect(2); break;
		case 83: keySelect(3); break;
		case 90: keySelect(4); break;
		case 88: keySelect(5); break;
	}
}

function keyUp(event)
{
	var keyCode = ('which' in event) ? event.which : event.keyCode;
	switch (keyCode)
	{
		case 81: keyReset(0); keySelect(-1); break;
		case 87: keyReset(1); keySelect(-1); break;
		case 65: keyReset(2); keySelect(-1); break;
		case 83: keyReset(3); keySelect(-1); break;
		case 90: keyReset(4); keySelect(-1); break;
		case 88: keyReset(5); keySelect(-1); break;
		case 82: adjustSelected(buttonIncrement); break;
		case 70: adjustSelected(-buttonIncrement); break;
		case 86: gameStart(); break;
	}
}

function hookEvent(element, eventName, callback)
{
	if(typeof(element) == "string")
		element = document.getElementById(element);
	if(element == null)
		return;
	if(element.addEventListener)
	{
		if(eventName == 'mousewheel')
			element.addEventListener('DOMMouseScroll', callback, false);  
		element.addEventListener(eventName, callback, false);
	}
	else if(element.attachEvent)
		element.attachEvent("on" + eventName, callback);
}

function cancelEvent(event)
{
	event = event ? event : window.event;
	if(event.stopPropagation)
		event.stopPropagation();
	if(event.preventDefault)
	event.preventDefault();
	event.cancelBubble = true;
	event.cancel = true;
	event.returnValue = false;
	return false;
}
	
</script>

<body onload="init();"> 
<div id="outerwrapper">
<div id="innerwrapper">
	<div class="counter" id="baron">
		<div class="timer" onClick="javascript: resetCounter(0);" id="baronFill">
			<div class="header">
				<div class="small text" id="baronHeaderTxt">Baron</div>
			</div>
			<div class="big text" id="baronTxt">?</div>
		</div>
		<div class="adjust left" onClick="javascript: adjustCounter(0, -buttonIncrement, 0);">
			<div class="medium text" id="baronMinusTxt">- :?</div>
		</div>
		<div class="adjust right" onClick="javascript: adjustCounter(0, buttonIncrement, 0);">
			<div class="medium text" id="baronPlusTxt">+ :?</div>
		</div>
	</div>

	<div class="counter" id="dragon">
		<div class="timer" onClick="javascript: resetCounter(1);" id="dragonFill">
			<div class="header">
				<div class="small text" id="dragonHeaderTxt">Dragon</div>
			</div>
			<div class="big text" id="dragonTxt">?</div>
		</div>
		<div class="adjust left" onClick="javascript: adjustCounter(1, -buttonIncrement, 0);">
			<div class="medium text" id="dragonMinusTxt">- :?</div>
		</div>
		<div class="adjust right" onClick="javascript: adjustCounter(1, buttonIncrement, 0);">
			<div class="medium text" id="dragonPlusTxt">+ :?</div>
		</div>
	</div>

	<div class="counter" id="blueGolem">
		<div class="timer" onClick="javascript: resetCounter(2);" id="blueGolemFill">
			<div class="header">
				<div class="small text" id="blueGolemHeaderTxt">Golem (Blue Team)</div>
			</div>
			<div class="big text" id="blueGolemTxt">?</div>
		</div>
		<div class="adjust left" onClick="javascript: adjustCounter(2, -buttonIncrement, 0);">
			<div class="medium text" id="blueGolemMinusTxt">- :?</div>
		</div>
		<div class="adjust right" onClick="javascript: adjustCounter(2, buttonIncrement, 0);">
			<div class="medium text" id="blueGolemPlusTxt">+ :?</div>
		</div>
	</div>

	<div class="counter" id="purpleGolem">
		<div class="timer" onClick="javascript: resetCounter(3);" id="purpleGolemFill">
			<div class="header">
				<div class="small text" id="purpleGolemHeaderTxt">Golem (Purple Team)</div>
			</div>
			<div class="big text" id="purpleGolemTxt">?</div>
		</div>
		<div class="adjust left" onClick="javascript: adjustCounter(3, -buttonIncrement, 0);">
			<div class="medium text" id="purpleGolemMinusTxt">- :?</div>
		</div>
		<div class="adjust right" onClick="javascript: adjustCounter(3, buttonIncrement, 0);">
			<div class="medium text" id="purpleGolemPlusTxt">+ :?</div>
		</div>
	</div>

	<div class="counter" id="blueLizard">
		<div class="timer" onClick="javascript: resetCounter(4);" id="blueLizardFill">
			<div class="header">
				<div class="small text" id="blueLizardHeaderTxt">Lizard (Blue Team)</div>
			</div>
			<div class="big text" id="blueLizardTxt">?</div>
		</div>
		<div class="adjust left" onClick="javascript: adjustCounter(4, -buttonIncrement, 0);">
			<div class="medium text" id="blueLizardMinusTxt">- :?</div>
		</div>
		<div class="adjust right" onClick="javascript: adjustCounter(4, buttonIncrement, 0);">
			<div class="medium text" id="blueLizardPlusTxt">+ :?</div>
		</div>
	</div>

	<div class="counter" id="purpleLizard">
		<div class="timer" onClick="javascript: resetCounter(5);" id="purpleLizardFill">
			<div class="header">
				<div class="small text" id="purpleLizardHeaderTxt">Lizard (Purple Team)</div>
			</div>
			<div class="big text" id="purpleLizardTxt">?</div>
		</div>
		<div class="adjust left" onClick="javascript: adjustCounter(5, -buttonIncrement, 0);">
			<div class="medium text" id="purpleLizardMinusTxt">- :?</div>
		</div>
		<div class="adjust right" onClick="javascript: adjustCounter(5, buttonIncrement, 0);">
			<div class="medium text" id="purpleLizardPlusTxt">+ :?</div>
		</div>
	</div>

	<div class="reset" id="reset" onClick="javascript: gameStart();"> 
		<div class="text medium" id="resetTxt">Reset to Game Start</div> 
	</div> 
</div>
<div id="bottomPad" style="position: relative; height:8px;"></div>
</div>
</body>
</html>